<template>
  <div class="set" id='store-status'>
    <Row type="flex" align="middle" justify="center" class="set_ct">
      <Col>
        <Form ref="formDynamic"
              :model="formDynamic"
              :label-width="100">
          <FormItem label="项目类型:"
                    :prop="'item.' + index + '.value'"
                    v-for="(item,index) in formDynamic.item"
                    :rules="[{required: true, message: '项目类型不能为空', trigger: 'blur'}]"
                    :key="index">
            <Input v-model="item.value" style="width:280px;" placeholder="请输入" :maxlength="16" @on-keyup='filterName(index)' @on-blur="filterName(index)"></Input>
            <span class="set_ct_form_icon" style="margin-left: 10px;"
                  v-if="formDynamic.item.length>1">
              <i class="iconsys icondel"
                title="删除"
                @click="handleRemove(index)">
              </i>
            </span>
            <span class="set_ct_form_icon" style="margin-left: 10px;"
                  v-if="formDynamic.item.length===1||(formDynamic.item.length>1&&index===formDynamic.item.length-1)"
                  @click="handleAdd(index)">
              <i class="iconsys iconadd"
                title="添加">
              </i>
            </span>
          </FormItem>
          <FormItem>
            <Button type="primary"
                    @click="handleSubmit('formDynamic')"
                    class="button">确定</Button>
            <Button @click="cancel"
                    class="button btn1">取消</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import './index.less'
import { routeEqual } from '@/libs/util'
import { getDicQuery, setDicSave } from '@/api/setting'
export default {
  data () {
    return {
      isTrue: true,
      formDynamic: {
        item: []
      }
    }
  },
  methods: {
    filterName (index) {
      this.formDynamic.item[index].value = this.formDynamic.item[index].value.replace(/[^0-9A-Za-z\u4e00-\u9fa5]/, '')
    },
    handleAdd () {
      this.formDynamic.item.push({
        value: ''
      })
    },
    handleRemove (index) {
      this.formDynamic.item.splice(index, 1)
    },
    handleSubmit () {
      this.$refs.formDynamic.validate(valid => {
        if (valid) {
          this.isTrue = true
          const arr = this.formDynamic.item
          for (var i = 0; i < arr.length - 1; i++) {
            for (var j = i + 1; j < arr.length; j++) {
              if (arr[i].value === arr[j].value) {
                this.isTrue = false
              }
            }
          }
          if (this.isTrue) {
            setDicSave({
              projectType: arr.map(val => val.value).join('|'),
              merchantId: this.$store.state.user.merchantId,
              msType: '0'
            }).then(res => {
              if (res.data.status === 200) {
                this.$Message.success('保存成功')
                this.closeModal()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          } else {
            this.$Message.error('不可设置相同的配置！')
          }
        }
      })
    },
    cancel () {
      this.closeModal()
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'shopmsg-setting'
        })
      })
    },
    // 查询
    getData () {
      getDicQuery({
        dictKeys: 'projectType',
        merchantId: this.$store.state.user.merchantId,
        msType: '0'
      }).then(res => {
        const result = res.data
        if (result.status === 200) {
          if (result.data[0].projectType + '' !== '0') {
            result.data[0].projectType.split('|').forEach(ele => {
              this.formDynamic.item.push({ value: ele })
            })
          } else {
            this.formDynamic.item.push({ value: '' })
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="less">
#store-status{
  .ivu-form .ivu-form-item-label {
    line-height: 0;
    margin-top: 2px;
  }
}
</style>
